<!--  -->
<template>
  <div class="bread">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        class="bread-item"
        v-for="item in levelList"
        :key="item.path"
      >
        <a class="link" @click.prevent="handleLink(item)">{{ item.name }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: null,
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    },
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter((item) => item.name)
      const first = matched[0]
      this.levelList = matched
    },
    handleLink(item) {
      this.$router.push(item).catch((err) => {})
    },
  },
}
</script>

<style lang="less" scoped>
.bread {
  height: 50px;
}
.el-breadcrumb {
  height: 100%;
  line-height: 50px;
}
/deep/ .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner .link {
  color: var(--text-normal-color) !important;
}
.link {
  color: var(--text-normal-color);
  cursor: pointer !important;
}
</style>
